<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    .banner {
      position: relative;
      width: 400px;
      height: 400px;
      margin: 100px 100px;
    }

    #box {
      position: absolute;
      left: 300px;
      width: 600px;
      height: 600px;
      border: 1px solid red;
      background: url(./images/b.jpg) no-repeat;
      display: none;
    }

    .box {
      position: absolute;
      height: 300px;
      width: 300px;
      /* background: url(./images/m.jpg) no-repeat; */
      
      border: 1px solid red;
      overflow: hidden;
      /* 鼠标样式 */
      cursor: move;
      /* display: none; */
    }
    .box img {
      height: 300px;
      width: 300px;
    }

    .mouse {
      width: 200px;
      height: 200px;
      position: absolute;
      background-image: url(./images/bg.jpg);
      display: none;
      
    }
  </style>
</head>

<body>
  <div class="banner">
    <div class="box">
      <img src="./images/m.jpg" alt="">
      <div class="mouse"></div>
    </div>
    <div id="box"></div>
  </div>


  <script>
    var box = document.querySelector('.box');
    var Box = document.querySelector('#box');
    var mouse = document.querySelector('.mouse');
    var banner = document.querySelector('.banner')
    box.onmouseenter = function (e) {
      mouse.style.display = 'block';
      Box.style.display = 'block';
 

      // mouse.style.left = 
      // console.log(e.offsetX)
    }
    //s鼠标离开

    box.onmouseleave = function () {
      mouse.style.display = 'none';
      Box.style.display = 'none';
    }
    //鼠标移动事件
    box.onmousemove = function (e) {
      var x = mouse.style.left;
     
      // if (0 < x) {
      //   return;
      // } if (x > 220) {啥
      //   return
      // } 
      var x = e.pageX - banner.offsetLeft - (mouse.offsetWidth)/2;
      var y = e.pageY - banner.offsetTop - (mouse.offsetWidth)/2;
      if(x < 0) {
        x = 0;
      }
      if(y < 0) {
        y = 0;
      }
      if(x > box.clientWidth - mouse.clientWidth) {
        x = box.clientWidth - mouse.clientWidth;
      }
      if(y > box.clientHeight - mouse.clientHeight) {
        y = box.clientHeight - mouse.clientHeight;
      }

      mouse.style.left = x + 'px';
      mouse.style.top = y + 'px';
      Box.style.backgroundPositionX = -2*x + 'px';
      Box.style.backgroundPositionY = -2*y + 'px';

    }
    
  </script>
</body>

</html>